<template>
    <el-dialog v-model="dialogVisible" :title="title" width="500">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="岗位编码" prop="bianma">
                <el-input v-model="ruleForm.bianma" />
            </el-form-item>
            <el-form-item label="岗位名称" prop="mingcheng">
                <el-input v-model="ruleForm.mingcheng" />
            </el-form-item>
            <el-form-item label="岗位排序" prop="paixu">
                <el-input v-model.number="ruleForm.paixu" />
            </el-form-item>
            <el-form-item label="岗位状态" prop="zhuangtai">
                <el-select v-model="ruleForm.zhuangtai" placeholder="请选择状态">
                    <el-option label="正常" :value="true" />
                    <el-option label="异常" :value="false" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="shijian">
                <el-date-picker v-model="ruleForm.shijian" type="date" placeholder="请选择创建时间" format="YYYY/MM/DD"
                    value-format="x" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
// 定义一个变量，控制 Dialog 对话框的显示隐藏
let dialogVisible = ref(false)
// 定义标题
let title = ref('')
// 打开对话框的方法
const showDialog = (row) => {
    // 判断是添加还是编辑(判断依据：是否传参)
    // console.log(row)
    if (row) { // 编辑：数据回填
        title.value = '编辑'
        ruleForm.value = { ...row } // 实现浅拷贝，避免直接修改原数据
    } else { // 添加：清空表单
        title.value = '添加'
        ruleForm.value = {
            bianma: '',
            mingcheng: '',
            paixu: '',
            zhuangtai: '',
            shijian: ''
        }
    }
    // 打开对话框
    dialogVisible.value = true
}
// 暴露组件中的数据或方法，可以在父组件中使用
defineExpose({ showDialog })

// 表单校验
// 表单实例
const ruleFormRef = ref()
// 表单数据对象（和表单双向绑定的数据）
const ruleForm = ref({
    bianma: '',
    mingcheng: '',
    paixu: '',
    zhuangtai: '',
    shijian: ''
})
// 验证规则
const rules = ref({
    bianma: [
        { required: true, message: '该项必填', trigger: 'blur' },
    ],
    mingcheng: [
        { required: true, message: '该项必填', trigger: 'blur' },
    ],
    paixu: [
        { required: true, message: '该项必填', trigger: 'blur' },
    ],
    zhuangtai: [
        { required: true, message: '该项必填', trigger: 'blur' },
    ],
    shijian: [
        { required: true, message: '该项必填', trigger: 'blur' },
    ],
})

// 导入添加、编辑API
import { addGangweiAPI, updateGangweiAPI } from '@/api/gangwei'
// 从element-plus中导入ElMessage组件
import { ElMessage } from 'element-plus'
// 接收 GangWei.vue 传递过来的获取数据的方法
const props = defineProps(['getGangwei'])
// 提交方法
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            // 通过id判断是添加还是编辑
            if (ruleForm.value.id) {
                // 调用API完成编辑功能
                await updateGangweiAPI(ruleForm.value.id, ruleForm.value)
                // 提示信息
                ElMessage.success('编辑成功')
            } else {
                // 调用API完成添加功能
                await addGangweiAPI(ruleForm.value)
                // 提示信息
                ElMessage.success('添加成功')
            }
            // 关闭对话框
            dialogVisible.value = false
            // 重新获取数据
            props.getGangwei()
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 重置方法
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped></style>